<template>
  <div>
    <el-card>
      <el-table border :data="skuList">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="名称" prop="skuName"></el-table-column>
        <el-table-column label="描述" prop="skuDesc"></el-table-column>
        <el-table-column label="默认图片">
          <template slot-scope="{ row }">
            <div style="width: 120px; height: 120px">
              <img
                style="width: 120px; height: 120px border-radius: 8px;"
                :src="row.skuDefaultImg"
                alt=""
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="重量(KG)"
          prop="weight"
          width="100px"
        ></el-table-column>
        <el-table-column
          label="价格(元)"
          prop="price"
          width="50px"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.isSale == 1"
              icon="el-icon-top"
              size="mini"
              type="success"
              @click="cancel(row)"
            ></el-button>
            <el-button
              v-else
              icon="el-icon-bottom"
              size="mini"
              type="info"
              @click="onSale(row)"
            ></el-button>
            <el-button
              icon="el-icon-edit"
              size="mini"
              type="primary"
              @click="edit"
            ></el-button>
            <el-button
              icon="el-icon-info"
              size="mini"
              type="info"
              @click="getSkuInfo(row)"
            ></el-button>
            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @onConfirm="delSku(row)"
            >
              <el-button
                style="margin-left: 10px"
                type="danger"
                icon="el-icon-delete"
                size="mini"
                slot="reference"
              ></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align: center"
        class="margin"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 7, 9, 11]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 右侧抽屉 -->
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :show-close="false"
      size="40%"
    >
      <el-row>
        <el-col :span="5"> <div class="left">名称</div> </el-col>
        <el-col :span="16">
          <div class="right">{{ skuInfo.skuName }}</div>
        </el-col>
        <el-col :span="5"> <div class="left">描述</div> </el-col>
        <el-col :span="16">
          <div class="right">{{ skuInfo.skuDesc }}</div>
        </el-col>
        <el-col :span="5"> <div class="left">价格</div> </el-col>
        <el-col :span="16">
          <div class="right">{{ skuInfo.price }}&nbsp;元</div>
        </el-col>
        <el-col :span="5"> <div class="left">平台属性</div> </el-col>
        <el-col :span="16" class="right">
          <el-tag
            class="tag"
            v-for="attrValue in skuInfo.skuAttrValueList"
            :key="attrValue.id"
            type="success"
            >{{ attrValue.valueName }}</el-tag
          >
        </el-col>
        <el-col :span="5"> <div class="left">商品图片</div> </el-col>
        <el-col :span="16">
          <el-carousel height="150px">
            <el-carousel-item
              v-for="item in skuInfo.skuImageList"
              :key="item.id"
            >
              <img class="img" :src="item.imgUrl" alt="" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      limit: 5,
      total: 0,
      skuList: [],
      drawer: false,
      direction: "rtl", // 抽屉打开方向
      skuInfo: {},
    };
  },
  created() {
    this.getSkuList();
  },
  methods: {
    async getSkuList() {
      const res = await this.$Api.sku.reqGetSkuList(this.page, this.limit);
      if (res.code == 200) {
        this.skuList = res.data.records;
        this.total = res.data.total;
      }
    },
    handleSizeChange(newLimit) {
      this.limit = newLimit;
      this.getSkuList();
    },
    handleCurrentChange(newPage) {
      this.page = newPage;
      this.getSkuList();
    },
    async onSale(sku) {
      const res = await this.$Api.sku.reqOnSale(sku.id);
      if (res.code == 200) {
        this.$message.success("已上架");
        sku.isSale = 1;
      }
    },
    async cancel(sku) {
      const res = await this.$Api.sku.reqCancel(sku.id);
      if (res.code == 200) {
        this.$message.info("已下架");
        sku.isSale = 0;
      }
    },
    edit() {
      this.$message.info("正在开发中....");
    },
    async getSkuInfo(sku) {
      this.drawer = true;
      const res = await this.$Api.sku.reqGetSkuInfo(sku.id);
      if (res.code == 200) {
        this.skuInfo = res.data;
      }
    },
    async delSku(sku) {
      const res = await this.$Api.sku.reqDeleteSku(sku.id);
      if (res.code == 200) {
        this.getSkuList();
        this.$message.success("删除成功");
      }
    },
  },
};
</script>

<style>
.el-carousel {
  width: 250px;
  height: 300px;
  border: 1px solid red;
  border: 1px solid #eee;
  margin-left: 20px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-carousel__button {
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
}
</style>

<style>
.el-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.left {
  float: right;
  font-size: 20px;
  font-weight: bold;
  margin: 20px 0;
}
.right {
  padding-left: 20px;
  color: dimgray;
  display: flex;
  flex-wrap: wrap;
}
.tag {
  margin-bottom: 10px;
  margin: 10px 5px;
}
.img {
  width: 100%;
  height: 100%;
}
</style>
